<template>
	<view class="switchAccount">
		<view class="acc-box">
			<view class="b-item" v-for="(item,index) in accountList" :key="index"  >
				<van-swipe-cell class="new_box" right-width="65">
					<van-cell-group>
						<view class="b-item" @tap="handleSwitch(item)">
						<view class="i-box">
							<view><image class="logo_img" :src="item.image"/></view>
							<view class="account_box">
								<view><text class="i-account">{{item.mobile}}</text></view>
								<view><image class="level_img" :src="img_root+'v'+item.member_id+'.png'"/></view>
							</view>
						</view>
						<view class="i-btn" v-if="user_info.user_phone===item.mobile">
							<image class="choose_img" src="../../static/img/choose_in.png"/>
						</view>
						</view>
					</van-cell-group>
					<view slot="right">
						<button class="delete_box" @tap="deleteAccount(item.mobile)">删除</button>
					</view>
				</van-swipe-cell>

			</view>
		</view>
		<view class="acc-add" @tap="handleGoLogin()">
			<view><image class="add_img"  src="../../static/img/add.png"/></view>
			<view class="add" >添加账号</view>
		</view>

		<view>
			<van-swipe-cell right-width="65">
				<van-cell-group>
				</van-cell-group>
				<view slot="right" >
					<button class="delete_box" @tap="">删除</button>
				</view>
			</van-swipe-cell>
		</view>


	</view>
</template>

<script>
	export default{
		name:"switchAccount",
		data(){
			return{
				accountList:uni.getStorageSync("userLists"),
				user_info:this.$store.state.user_info,
				img_root:'../../static/img/'
			}

		},
		methods:{
			handleGoLogin(){
				uni.navigateTo({
					url:'login'
				})
			},
			async handleSwitch(item){
				console.log(item)
				uni.showLoading({});
				let resData=await this.$apis.login(item)
				if(resData.code===0){
					this.$store.commit("SETTOKEN",resData.data.access_token)
					this.$store.commit("SET_USERINFO",resData.data)
					uni.reLaunch({
						url:'../main/user'
					})
				}
			},

			deleteAccount(mobile){
				if(mobile===this.user_info.user_phone){
					uni.showToast({
						title:"当前已登录账号不能删除",
						icon:"none",
						duration: 1000,
					})
					return
				}
				if(uni.getStorageSync("userLists").length>0){
					let userLists=uni.getStorageSync("userLists")
					let key=0
					userLists.forEach((item)=>{ // 判断是否重复添加
						if(item.mobile===mobile){
							userLists.splice(key, 1);
							return
						}
						key++
					})
					uni.setStorageSync("userLists",userLists)
				}
				uni.reLaunch({
					url:'../login/switchAccount'
				})


			}

		}
	}
</script>

<style lang="less" scoped>
	.new_box{
		width: 100% !important;
	}
	.switchAccount{
		.acc-add{
			display: flex;
			flex-direction: row;
			margin-left: 27rpx;
			width: 700rpx;
			height: 100rpx;
			box-sizing: border-box;
			position: relative;
			border-bottom: solid 1px #C8C7CC;
			.add{
				box-sizing: border-box;
				padding: 5rpx;
				/*background-color: orange;*/
				font-size: 28.8rpx;
				border-radius: 5rpx;
				color: #FF9502;
				/*border: solid 1px #C8C7CC;*/
				position: absolute;
				left: 80rpx;
				top: 50%;
				transform: translate(0,-50%);
			}
			.add_img{
				position: absolute;
				left: 10rpx;
				top: 50%;
				transform: translate(0,-50%);
				width: 54rpx;
				height: 54rpx;
			}
		}
	    .acc-box{
			width: 700rpx;
			margin: 0 auto;
			.b-item{
				display: flex;
				height: 100rpx;
				align-items: center;
				justify-content: space-between;
				border-bottom: solid 0.1px #cccccc;
				padding-top: 10rpx;
				padding-bottom: 10rpx;
				.i-box{
					display: flex;
					flex-direction: row;
					.i-account{
						font-size: 30rpx;
						color: #333333;
						padding-right: 30rpx;
					}
					.i-level{
						padding: 0 10rpx;
						font-size: 30rpx;
						background-color: green;
						border-radius: 10rpx;
						border: solid 1px #C8C7CC;
					}
					.level_img{
						width: 48rpx;
						height: 30rpx;
					}
					.account_box{
						margin-left: 45rpx;
					}

				}
				.i-btn{
					box-sizing: border-box;
					/*padding: 5rpx 7rpx;*/
					.choose_img{
						width: 30rpx;
						height: 25rpx;
						margin-right: 45rpx;
					}
				}
				.logo_img{
					width: 80rpx;
					height: 80rpx;
					display: block;
					border-radius: 20px;
				}
			}
		}
	}
	.delete_box{
			color: #ffffff;
			background-color: #FF9502;
			margin-top: 15rpx;
			font-size: 24rpx;

	}
</style>
